<template>
  <div class="info">
    <div>
      <div class="font">加密工具</div>
      <div>
        <NSpace align="center">
          <NForm inline>
            <NFormItem>
              <NInput v-model:value="mdInfo" placeholder="请输入信息"></NInput>
            </NFormItem>
            <NFormItem>
              <NButton
                :disabled="mdInfo === '' || mdLoading || /^\s+$/.test(mdInfo)"
                @click="mdTool"
                >转换成md5</NButton
              >
            </NFormItem>
            <NFormItem>
              <NCheckbox v-model:checked="upperMode" size="large" label="大写模式"></NCheckbox>
            </NFormItem>
          </NForm>

          <div>=>{{ mdResult }}</div>
        </NSpace>
      </div>
      <div>
        <NForm>
          <NFormItem>
            <NInput v-model:value="sInfo" placeholder="请输入信息" type="textarea"></NInput>
          </NFormItem>
          <NFormItem>
            <NSpace justify="center">
              <NButton :disabled="sInfo === '' || sLoading" @click="sTool">加密</NButton>
              /
              <NButton :disabled="sInfo === '' || sLoading" @click="decrypt">解密</NButton>
            </NSpace>
          </NFormItem>
        </NForm>

        <div>{{ sResult }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Api } from '@/types/Api'
import type { BaseResult } from '@/types/BaseResult'
import { NButton, NCheckbox, NForm, NFormItem, NInput, NSpace, useMessage } from 'naive-ui'
import { ref } from 'vue'
const message = useMessage()

//#region md5加密
const mdInfo = ref('')
const mdResult = ref('')
const mdLoading = ref(false)

const mdTool = () => {
  mdLoading.value = true
  Api.get('/tools/md5', { info: mdInfo.value }, (data: BaseResult) => {
    mdLoading.value = false
    if (data.success) {
      mdResult.value = upperMode.value ? data.message.toUpperCase() : data.message
      return
    }
    message.error(data.message)
  })
}

const upperMode = ref(false)

//#endregion

//#region 加密
const sInfo = ref('')
const sResult = ref('')
const sLoading = ref(false)

const sTool = () => {
  sLoading.value = true
  Api.get('/tools/encrypt', { info: sInfo.value }, (data: BaseResult) => {
    sLoading.value = false
    if (data.success) {
      sResult.value = data.message
      return
    }
    message.error(data.message)
  })
}

const decrypt = () => {
  sLoading.value = true
  Api.get('/tools/decrypt', { info: sInfo.value }, (data: BaseResult) => {
    sLoading.value = false
    if (data.success) {
      sResult.value = data.message
      return
    }
    message.error(data.message)
  })
}

//#endregion
</script>

<style scoped lang="scss">
.info {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .font {
    font-size: 1.5rem;
  }
  .textarea {
    display: flex;
    justify-content: center;
  }
}
</style>
